Free fake API 為資料庫，以 FutureBuilder + http 抓取
為Flutter 建立 Django 資料庫

承上文章，此將 Flutter 去抓取本地伺服器 Django 內的文章資料，並在模擬器內以 ListView 呈現。
Django:
開啟 Django 資料庫 runserver

python manage.py runserver 0.0.0.0:8000

Flutter:

1. AndroidManifest.xml file 加入下指令(無腦全開)

<manifest ...">
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

</manifest>

2. 到 main.dart 修改:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; // 導入 http.get 抓資料
import 'dart:convert'; // 導入 jsonDecode 解壓資料

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  // 輸入資料網址 令 http 抓取資料
  final String host = "http://172.20.10.4:8000/notes/"; // 將前改為自己的 IP 位置

  Future getData() async {
    final response = await http.get(Uri.parse(host));
    Utf8Decoder utf8decoder = Utf8Decoder(); // 文章若有中文, 需以此修正亂碼
    var result = jsonDecode(utf8decoder.convert(response.bodyBytes));
    print(result);
    return result;
  }

  @override
  Widget build(BuildContext context) {
    // Scaffold 輸出
    return Scaffold(
      appBar: AppBar(
        title: Text('FutureBuilder'),
      ),
      body: FutureBuilder(
        future: getData(), // 執行 http，並解壓解碼
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          // snapshot 抓資料，若有資料則:
          if (snapshot.hasData) {
            List datas = (snapshot.data);
            return ListView.builder(
                itemCount: datas.length,
                itemBuilder: (context, idx) {
                  var data = datas[idx];
                  return ListTile(
                    title: Text(data['title']),
                    subtitle: Text(data['body']),
                  );
                });
          } else if (snapshot.hasError) {
            print('Error: ${snapshot.error}');
            return Container(); // 失敗回傳空資料
          } else {
            print('Awaiting result...');
            print(snapshot);
            return Container();
          }
        },
      ),
    );
  }
}

開啟模擬器測試，android 和 chrome 都可正常運行

註:
雖然是在同一台電腦內開伺服器並用模擬器去抓資料，但android模擬器似乎就視為區網內的另一主機，所以伺服器必須開啟 ALLOWED_HOSTS，android模擬器在由此進入資料庫。
起初觀念不清在這兜圈子，給需要的人做個借鏡!小白自學，歡迎評論指導!